<template>
  <div class="page-container">
    <el-card class="box-card">
      <el-row>
        <el-col :span="12">
          <el-row>
            <div>
              <el-date-picker
                  v-model="dateList"
                  type="daterange"
                  range-separator=" - "
                  start-placeholder="确认日期开始"
                  end-placeholder="确认日期结束"
                  value-format="YYYY-MM-DD"
                  @change="selectTimes"
                  size="small"
                  style="margin-right: 10px;width: 255px"
              />
            </div>
            <el-button size="small" icon="ele-Refresh" @click="filterReset">重置</el-button>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row justify="end">
            <el-button size="small" type="primary" icon="ele-Plus" @click="record">新增收款</el-button>
            <el-button size="small" type="warning" icon="ele-CirclePlus" @click="expenditure">新增支出</el-button>
          </el-row>
        </el-col>
      </el-row>
      <div class="table-box">
        <el-table :data="list" size="small" class="table-box" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
          <el-table-column>
            <template #header>
              <span style="margin-right: 5px">收支类型</span>
              <el-popover placement="bottom" width="140" trigger="click">
                <template #reference>
                  <el-icon :size="15" :color="search.typeId ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                    <ele-Filter/>
                  </el-icon>
                </template>
                <el-select v-model="search.typeId" size="small" placeholder="请选择收支类型" clearable filterable @change="bindSearch">
                  <el-option v-for="item in capitalTypes" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-popover>
            </template>
            <template v-slot="{row}">{{ row['capitalType'].name }}</template>
          </el-table-column>
          <el-table-column label="关联">
            <template v-slot="{row}">
              <template v-if="row['agendaMatter'] && row['agendaMatter']['relateItems']">
                <div v-for="item in row['agendaMatter']['relateItems']" :key="item.id">{{ item.label.replace('/', '：') }}</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="amount">
            <template #header>
              <span style="margin-right: 5px">金额（元）</span>
              <el-popover placement="bottom" width="240" trigger="click">
                <template #reference>
                  <el-icon :size="15" :color="search.sa || search.ea ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                    <ele-Search/>
                  </el-icon>
                </template>
                <el-input-number v-model="search.sa" size="small" :precision="2" :controls="false" style="width: 100px" @input="getList"/>
                <span style="margin: 0 5px">-</span>
                <el-input-number v-model="search.ea" size="small" :precision="2" :controls="false" style="width: 100px" @input="getList"/>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span style="margin-right: 5px">账户类型</span>
              <el-popover placement="bottom" width="160" trigger="click">
                <template #reference>
                  <el-icon :size="15" :color="search.accountId ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                    <ele-Filter/>
                  </el-icon>
                </template>
                <el-select v-model="search.accountId" size="small" placeholder="请选择账号" clearable filterable @change="bindSearch">
                  <el-option v-for="item in accountList" :key="item.id" :label="item.name + ' - ' + item.account" :value="item.id"/>
                </el-select>
              </el-popover>
            </template>
            <template v-slot="{row}">{{ row['capitalAccount'].name }}</template>
          </el-table-column>
          <el-table-column label="账号">
            <template v-slot="{row}">{{ row['capitalAccount'].account }}</template>
          </el-table-column>
          <el-table-column label="附注" prop="remark"/>
          <el-table-column label="确认日期" prop="confirmDate"/>
          <el-table-column label="单据">
            <template v-slot="{row}">
              <el-button size="small" v-if="row['agendaMatter']" type="primary" text link @click="skip">
                {{ row['agendaMatter']['codeName'] + ' - ' + row['agendaMatter']['info']['capitalStreamNo'] }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="单据创建人/部门">
            <template v-slot="{row}">
              <span v-if="row['agendaMatter']">{{ row['agendaMatter']['sponsor'].userName + '/' + row['agendaMatter']['sponsor']['oaDeptName'] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-block">
        <el-pagination
            :small="true"
            :total="total"
            :disabled="false"
            :background="false"
            :hide-on-single-page="false"
            v-model:currentPage="search.current"
            v-model:page-size="search.size"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="getList"
            layout="total, sizes, prev, pager, next, jumper"/>
      </div>
    </el-card>

    <income v-model:dialogDrawer="incomeVisible" :type="matterType" @onSubmit="getList"/>
    <expenditure v-model:dialogDrawer="expenditureVisible" :type="matterType" @onSubmit="getList"/>

  </div>
</template>

<script>
import {reactive, toRefs, ref, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import Income from '/@/views/matter/money/fund/Income.vue'
import Expenditure from '/@/views/matter/money/fund/Expenditure.vue'
import {useRouter} from 'vue-router'
import capitalStreamApi from '/@/api/money/capitalStream'
import capitalTypeApi from '/@/api/money/capitalType'
import capitalAccountApi from '/@/api/money/capitalAccount'

export default {
  name: 'MoneyList',
  components: {
    Income,
    Expenditure
  },
  setup() {
    const router = useRouter()
    const incomeFormRef = ref()
    const state = reactive({
      matterType: '', // 有些关联是不一致的
      incomeVisible: false, // 收入Visible
      expenditureVisible: false, // 支出Visible
      dateList: [],
      list: [],
      total: 0,
      search: {
        current: 1,
        size: 10,
        typeId: null,   // 收支类型id
        accountId: null,    // 资金账户id
        sa: null,   // 金额起始
        ea: null,   // 金额结束
        st: null, // 开始时间
        et: null // 结束时间
      },
      accountList: [],  // 账户列表
      incomeForm: {  //收入form
        type: '',
        account: '',
        accountType: '',
        accountNumber: '',
        remark: '',
        createTime: '',
        document: '',  //单据
        createUserId: '', //创建人ID
        deptId: ''
      },
      expenditureForm: { // 支出form

      },
      incomeRules: {
        deptId: [{required: true, trigger: 'blur', message: '请选择部门'}]
      },

      expenditureRules: [],
      capitalTypes: [],
    })

    // 条数修改
    const handleSizeChange = e => {
      state.search.size = e
      state.search.current = 1
      getList()
    }
    //初始化列表
    const getList = () => {
      capitalStreamApi.getPage(state.search).then(res => {
        state.list = res.data.records
        state.total = res.data.total
      }).catch(e => console.log(e))
    }
    // 搜索
    const bindSearch = () => {
      state.search.current = 1
      getList()
    }
    // 重置
    const filterReset = () => {
      state.dateList = []
      state.search = {
        current: 1,
        size: 10,
        typeId: null,   // 收支类型id
        accountId: null,    // 资金账户id
        sa: null,   // 金额起始
        ea: null,   // 金额结束
        st: null, // 开始时间
        et: null // 结束时间
      }
      getList()
    }
    // 筛选时间
    const selectTimes = (val) => {
      if (val && val.length > 0) {
        state.search.st = val[0]
        state.search.et = val[1]
      } else {
        state.search.st = state.search.et = null
      }
      getList()
    }
    //记收入
    const record = (row) => {
      state.incomeVisible = true
    }
    //记支出
    const expenditure = (row) => {
      state.expenditureVisible = true
    }
    //记支出提交
    const expenditureSubmit = () => {

    }
    //批量删除
    const BatchRemove = () => {
      ElMessageBox.confirm(`确定删除？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        buttonSize: 'small',
        type: 'warning'
      }).then(() => {
        ElMessage.success('删除成功')
      })
    }
    // 跳转
    const skip = (name) => {
      if (name) {
        router.push({name: name})
      }
    }

    onMounted(() => {
      capitalTypeApi.getList().then(res => state.capitalTypes = res.data).catch(e => console.log(e))
      capitalAccountApi.getList().then(res => state.accountList = res.data).catch(e => console.log(e))
      getList()
    })

    return {
      ...toRefs(state),
      incomeFormRef,
      router,
      handleSizeChange,
      getList,
      bindSearch,
      selectTimes,
      filterReset,
      record,
      BatchRemove,
      expenditure,
      expenditureSubmit,
      skip,
      Income,
      Expenditure
    }
  }


}
</script>

<style lang="scss" scoped>
.page-container {
  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

  }
}
</style>
